import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    NavBar,
    Form,
    Input,
    TextArea,
    Button,
    Toast,
    Dialog,
} from 'antd-mobile';
import { LeftOutlined } from '@ant-design/icons';
import styles from './index.module.less';

interface PatientInfo {
    id: string;
    name: string;
    gender: string;
    age: number;
    visitType: 'first' | 'follow-up';
    chiefComplaint: string;
    history: string;
    allergies: string[];
}

const Reception: React.FC = () => {
    const { patientId } = useParams<{ patientId: string }>();
    const navigate = useNavigate();
    const [form] = Form.useForm();

    // Mock data - replace with API call
    const patientInfo: PatientInfo = {
        id: patientId || '',
        name: '张三',
        gender: '男',
        age: 45,
        visitType: 'first',
        chiefComplaint: '',
        history: '',
        allergies: ['青霉素'],
    };

    const handleBack = () => {
        Dialog.confirm({
            content: '确定要离开吗？未保存的信息将会丢失',
            onConfirm: () => {
                navigate(-1);
            },
        });
    };

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            console.log('Form values:', values);
            // TODO: Submit to backend
            Toast.show({
                icon: 'success',
                content: '保存成功',
            });
            navigate(`/medical-record/${patientId}`);
        } catch (error) {
            console.error('Form validation failed:', error);
        }
    };

    return (
        <div className={styles.container}>
            <NavBar onBack={handleBack} className={styles.navBar}>
                接诊
            </NavBar>

            <div className={styles.patientHeader}>
                <div className={styles.basicInfo}>
                    <span className={styles.name}>{patientInfo.name}</span>
                    <span className={styles.gender}>{patientInfo.gender}</span>
                    <span className={styles.age}>{patientInfo.age}岁</span>
                </div>
                {patientInfo.allergies.length > 0 && (
                    <div className={styles.allergies}>
                        <span className={styles.label}>过敏史：</span>
                        {patientInfo.allergies.join('、')}
                    </div>
                )}
            </div>

            <Form
                form={form}
                layout="vertical"
                className={styles.form}
                footer={
                    <Button
                        block
                        type="submit"
                        color="primary"
                        size="large"
                        onClick={handleSubmit}
                    >
                        保存并进入病历
                    </Button>
                }
            >
                <Form.Item
                    name="chiefComplaint"
                    label="主诉"
                    rules={[{ required: true, message: '请输入主诉' }]}
                >
                    <TextArea
                        placeholder="请输入患者主诉"
                        rows={3}
                        maxLength={200}
                        showCount
                    />
                </Form.Item>

                <Form.Item
                    name="history"
                    label="现病史"
                    rules={[{ required: true, message: '请输入现病史' }]}
                >
                    <TextArea
                        placeholder="请输入现病史"
                        rows={5}
                        maxLength={500}
                        showCount
                    />
                </Form.Item>

                <Form.Item
                    name="physicalExam"
                    label="体格检查"
                    rules={[{ required: true, message: '请输入体格检查结果' }]}
                >
                    <TextArea
                        placeholder="请输入体格检查结果"
                        rows={4}
                        maxLength={300}
                        showCount
                    />
                </Form.Item>
            </Form>
        </div>
    );
};

export default Reception; 